<style>
    .show{display: inherit}
    .hide{display: none}
    table tr td,table tr th{width: 5%}
    .layui-btn{margin-right: 10px}

    .layui-table-cell {overflow-x: hidden;overflow: inherit; }/*
    .layui-table-box {
        overflow: inherit;
    }
    .layui-table-body {
        overflow: inherit;
    }*/


</style>
<style>
    .layui-form-label{width: 250px;text-align: left;}
</style>
<div class="layui-tab layui-tab-brief" id="vue_tab_content" lay-filter="docDemoTabBrief" style="clear:both;">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>{{ft_name}} ，栽床{{temp_f_date_1}}月份对帐明细</legend>
<!--        <div class="layui-inline">-->
<!--            <label class="layui-form-label">总金额：222343元</label>-->
<!--        </div>-->
    </fieldset>
    <div class="layui-tab-content">
        <table id="dataTable" lay-filter="demoEvent"></table>
    </div>
</div>



{include file="system@block/layui" /}
<script type="text/html" id="skuTpl">
    <span >{{ d.caichuang_over_time }}</span> <br>
    <span class="copy-item">{{ d.client_ordernum }}</span> <br>
    <span class="copy-item">{{ d.sku }}</span>
</script>
<script type="text/html" id="picTpl">
    <span class="lay-pic-container" src="{{d.pic_res}}">
        <img src="{{d.pic_res}}" class="lay-pic">
    </span>
</script>
<script type="text/html" id="caiChuangTypeTpl">
    {{# if (d.caichuang_type=='1') { }}
    手工裁剪
    {{# } else { }}
    电脑裁剪
    {{# } }}
</script>

<script type="text/html" id="toolbar">
    <div class="layui-btn-group fr">
        <form class="layui-form layui-form-pane fixed-bar-form" action="{:url('',['id' => $id])}" method="get" id="hisi-table-search">
            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm hisi-export">导出</button>
            <form>
                <a data-href="{:url('check')}?process_stage=1&status=11200" class=" layui-btn layui-btn-primary layui-btn-sm j-page-btns confirm layui-icon back">返审</a>&nbsp;&nbsp;

    </div>
</script>

<script src="__PUBLIC_JS__/jquery.2.1.4.min.js?v={:config('hisiphp.version')}"></script>
<script src="__PUBLIC_JS__/xm-select/dist/xm-select.js?v={:config('hisiphp.version')}"></script>
<script src="__PUBLIC_JS__/vue@3.2.26/dist/vue.global.js"></script>
<script type="text/javascript">
    //#vue_tab_content
    const allContent = {
        data() {
            return {
                ft_name:'',
                temp_f_date_1:''
        }
        }
    }
    const vm=Vue.createApp(allContent).mount('#vue_tab_content');
    layui.use(['table', 'laydate', 'form', 'laytpl','tool','layer'], function() {
        var $ = layui.jquery;
        var table = layui.table;
        var laydate = layui.laydate;
        var form = layui.form;
        var layer = layui.layer;
        var initialize=0,second_initialize=0,first_init=0,changetab=0;
        laydate.render({
            elem: '#create_date_range'
            ,range: '~'
            ,theme: 'molv'
            ,mark: {'{:$today}':''}
            ,change: function(value, date, endDate){
                $('#create_date_range').val(value);
                $('#layui-laydate1').remove();//关闭面板
            }
        });
        laydate.render({
            elem: '#create_date_range1'
            ,range: '~'
            ,theme: 'molv'
            ,mark: {'{:$today}':''}
            ,change: function(value, date, endDate){
                $('#create_date_range1').val(value);
                $('#layui-laydate2').remove();//关闭面板
            }
        });

        laydate.render({
            elem: '#stall_order_time'
            ,range: '~'
            ,theme: 'molv'
            ,mark: {'{:$today}':''}
            ,change: function(value, date, endDate){
                $('#stall_order_time').val(value);
                $('#layui-laydate3').remove();//关闭面板
            }
        });
        window.status=0;
        window.statCli = function(status) {
            var url='{:url()}?status='+status;
            window.status=status;
            $("#hisi-table-search").attr('action',url);
            $("#seacher").click();
            changetab=1;
        }

        table.render({
            elem: '#dataTable'
            ,url: '{:url("billList", ["id" => $id])}' //数据接口
            ,page: true //开启分页
            //,skin: 'row'
            ,even: true
            ,limit: 20
            ,limits: [20,50,100,150,200]
            ,text: {
                none : '暂无相关数据'
            }
            ,toolbar: '#toolbar'

            ,defaultToolbar: ['exports', 'print']
            ,cols: [[ //表头
                {type:'checkbox'}
                //19-23
                ,{field: 'skuTpl', title: '裁剪时间/订单号/SKU', templet:'#skuTpl',width:170}
                ,{field:'pic_res',title : '图片', templet:'#picTpl',width:100}
                ,{field: 'caichuang_chuanghao', title: '床号'}
                ,{field: 'quantity', title: '订单总数'}
				,{field:'caichuang_user_name',title : '裁剪员',width:100}
                ,{field: 'process_price', title: '单价/元' }
                ,{field: 'sum_shicai_count', title: '实裁总数'}
				,{field: 'pay_count', title: '结算数量'}
				,{field: 'sum_pay_money', title: '总金额/元' }
                ,{field: 'sum_delivery_count', title: '打包数'}
                ,{field: 'sum_store_count', title: 'MES入仓数'}
                ,{field: 'sum_available_count', title: '米莫入库数'}
                ,{field:'caichuang_type',title : '裁剪类型',templet:'#caiChuangTypeTpl'}
                ,{field: 'ft_name', title: '工厂',width:100}
                ,{field:'caichuang_position_txt',title : '裁剪方式'}
                
            ]]
            ,done: function(res, curr, count){
                vm.$data.ft_name=res.ext.ft_name;
                vm.$data.temp_f_date_1=res.ext.temp_f_date[1];
                layui.form.render();
            }
        });
    });
</script>